@extends('layouts.back_stage')
@section('content')
  <style>
 .shopBg{background:#fff;overflow: hidden;padding:29px 0 28px 20px;margin-top:15px;}
 [v-cloak] {display: none;}
  </style>
  <div class="container">
    <div style="padding:20px 20px 5px 0;overflow:hidden;"><h3 style="float:left;">编辑管理员角色</h3></div>
        <div class="row app" id="app" v-cloak>
          <div class="shopBg">
          <div>
            <label>  &nbsp; &nbsp;用户名：&nbsp; &nbsp;</label>
               <el-input v-model="user_name" style="width:300px;margin:0 0 20px 0" maxlength="10"  placeholder="" size="small" style="width:300px;"></el-input>
          </div>
          <div>
            <label> &nbsp;&nbsp; 手机号：&nbsp;&nbsp;&nbsp;</label>
                <el-input v-model="phone" style="width:300px;margin:0 0 20px 0" placeholder="" maxlength="11" size="small" style="width:300px;"></el-input>
          </div>
          <div>
             <label>所属机构： &nbsp;&nbsp;</label>
                <el-cascader style="width:300px;margin:0 0 20px 0" :options="companyList" @change="respuert" v-model="company" :change-on-select="true" size="small"></el-cascader>
                <el-button  class="but-left" size="small" style="float:right;margin-right:30px"  @click="check" type="primary">提交</el-button>
          </div> 
          <div>
          <label>&nbsp;&nbsp;  &nbsp;部门名： &nbsp;</label>
                  <el-select  size="small" v-model="department" style="width:300px;margin:0 0 20px 0" class="ingred_sel" >
                      <el-option  v-for="(item,index) in bumen" :key="item.index" :value="item.id" :label="item.department"> @{{item.department}}</el-option>
                  </el-select>
           </div>
            <div>
            <label>&nbsp;&nbsp;  &nbsp;角色名：&nbsp;&nbsp;</label>
                <el-select v-model="role" size="small" @change="role_change" style="width:300px;margin:0 0 20px 0" >
                     <el-option v-for="item in role_name_list" :key="item.value" :label="item.label" :value="item.value"></el-option>
                 </el-select>
              </div> 
          <div>
            <el-collapse v-model="activeNames" size="small">
                <el-collapse-item v-for="(item,index) in data" class="titleName" disabled :title="item.name" :name="item.id" :key="item.id">
                    <el-card class="box-card" v-for="page in item.child" disabled :key="page.name" style="margin-bottom:15px;">
                        <div slot="header" class="clearfix">
                            <span>@{{ page.name }}</span>
                            <el-checkbox style="float: right; padding: 3px 0" disabled v-model="page.allChoose" @change="midAllChoose(page);checkMax(item)">全选</el-checkbox>
                        </div>
                        <div class="text item">
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox @change="addFatherNode(item.id,page.id,box.id,page,item)" disabled v-for="box in page.child" :label="box.id" :key="box.id">@{{ box.name }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-card>
                </el-collapse-item>
                </el-collapse>
           </div>
        </div>
      </div>
  </div> 
 
  <script>
      const App=new Vue({
        el: '#app',
        data() {
          return {
            activeNames:[],
            company:[],
            companyId:'',
            compan_id:'',
            data:[],
            companyList:[],
            checkList:[],
            dataId:'',
            department:'',
            departmentId:'',
            role_name_list:[],
            bumen:[],
            user_name:'',
            user_id:'',
            phone:'',
            role:'',
          }
        },
        methods: {
          respuert(){
           this.typeFocus();
           this.nameFocus();
          },
          //角色名选择
          role_change(){
            this.nameFocus();
            this.checkList=[]
            let that = this
                $.ajax({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    url: `/role/has_node/${this.role}`,
                    type: 'get',
                    data: {
                    },
                    dataType: 'json',
                    success: function(res) {
                        for(let data in res.content.roles_node){
                        that.checkList.push(Number(res.content.roles_node[data]))
                        }
                    },
                    error: function() {
                    }
                });
          },
          //机构的连级结构
          getCompanyList(){
                let that=this
                let list=[]
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                        'contentType':'application/json'
                    },
                    url: '/clients/getall',
                    type: 'get',
                    dataType: 'json',
                    success:res=>{
                         for(var e in res.content[1]){
                            this.companyValue=res.content[1]
                         }
                        if(res.result.success){
                            clients=res.content[1]
                            for(let value of res.content[1]){
                                value['value'] = value.id
                                value['label'] = value.company_name
                                let child_data = res.content[1].filter((n) => n.pid == value.id && n.id != value.id)
                                if(child_data.length > 0){
                                    value['children'] = child_data
                                }
                            }
                            this.companyList = res.content[1].filter((n) => n.id == res.content[0])
                        }else{
                            this.$notify.error({
                                title: '错误',
                                message: res.result.errorMsg
                            })
                        }
                    }
                })
              },
             // 部门名请求
              typeFocus(){
                    let that=this
                    this.companyId=this.company[this.company.length-1]
                 $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                        'contentType':'application/json'
                    },
                    url: `/departments/getall?id=${this.companyId}`,
                    type: 'get',
                    dataType: 'json',
                    success:res=>{
                       that.bumen=res.content
                      }
                    })
                },
                //机构
                 getCompanyList(){
                    let that=this
                    let list=[]
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                        'contentType':'application/json'
                    },
                    url: '/clients/getall',
                    type: 'get',
                    dataType: 'json',
                    success:res=>{
                         for(var e in res.content[1]){
                            this.companyValue=res.content[1]
                         }
                        if(res.result.success){
                            clients=res.content[1]
                            for(let value of res.content[1]){
                                value['value'] = value.id
                                value['label'] = value.company_name
                                let child_data = res.content[1].filter((n) => n.pid == value.id && n.id != value.id)
                                if(child_data.length > 0){
                                    value['children'] = child_data
                                }
                            }
                            this.companyList = res.content[1].filter((n) => n.id == res.content[0])
                        }else{
                            this.$notify.error({
                                title: '错误',
                                message: res.result.errorMsg
                            })
                        }
                    }
                })
              },
         //点击表格展开事件
            getNode(){
                    let self = this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/nodeInfo',
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                                let menu_option = []
                                res.content.menus.forEach(element => {
                                    let page_option = []
                                    let pages_data = res.content.pages
                                    for(var value in pages_data){
                                        if(value == element.id){
                                            let item_option = []
                                            for(let item_pages of pages_data[value]){
                                                let funs_data = res.content.funs
                                                let item_chilld = []
                                                for(let funs in funs_data){
                                                    if(funs == item_pages.id){
                                                        item_chilld = funs_data[funs]
                                                    }
                                                }
                                                item_option.push({"allChoose":false,"name":item_pages.name,"id":item_pages.id,"pid":item_pages.pid,"type":item_pages.type,"child":item_chilld})
                                            }
                                            page_option = item_option
                                        }
                                    }
                                    self.activeNames.push(element.id)
                                    menu_option.push({"name":element.name,"id":element.id,"pid":element.pid,"type":element.type,"child":page_option})
                                })
                                self.data = menu_option
                            }else{
                                self.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                            }
                        },
                        error: function() {
                        }
                    });
                },
                roleName(){
                    let that = this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: `/role/has_node/${that.role}`,
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                          for(let data in res.content.roles_node){
                            that.checkList.push(Number(res.content.roles_node[data]))
                            }
                        },
                        error: function() {
                        }
                    });
                },
                nameFocus(){
                  let that=this
                  this.companyId=this.company[this.company.length-1]
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: `/distribute/role/getall?id=${this.companyId}`,
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                               for(var w in res.content){
                                that.role_name_list.push(
                                    {"label":res.content[w].rolename,"value":res.content[w].id}
                                )
                               }
                            }else{

                            }
                        },
                    
                    });
                },
                  //请求
             request(){
                let that=this
                var aa=[]
                $.ajax({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    url: `/distribute/admin/show?id=${this.dataId}`,
                    type: 'get',
                    dataType: 'json',
                    success: function(res) {
                        if(res.content.department==null){
                        res.content.department=''
                        }
                        if(res.content.role==null){
                        res.content.role=''
                        }
                        if(res.content.tree==null){
                            res.content.tree=''
                        }
                        if(res.content.company==null){
                        res.content.company=''
                        }
                        that.department=res.content.department.id,
                        aa=res.content.tree.split('-').slice(1,-1)
                        that.company=aa.map(item=> +item )
                        that.compan_id=res.content.company.id
                        that.user_name=res.content.admin_name,
                        that.user_id=res.content.id,
                        that.phone=res.content.admin_tel
                        that.role=res.content.role.id
                        that.typeFocus();
                        that.nameFocus();
                        that.roleName();
                     }
                }) 
             },
             //搜索
              check(){
                let that=this
                this.companyId=this.company[this.company.length-1]
                if(that.department==null){
                    that.department=that.department
                }
                if(this.companyId==null){
                    this.companyId=that.compan_id
                }
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    type:'put',
                    url:'/distribute/admin/update',
                    data:{
                        'user_name':this.user_name, 
                        'user_id':this.user_id, 
                        'company_id':this.companyId,
                        'department_id':that.department,
                        'phone':that.phone,
                        'role_id':that.role
                    },
                    dataType:'json',
                    success: function (data) {
                        if (data.result.success == true) {
                            that.$notify({
                                title: '提示',
                                message:data.content
                            });
                         window.location.href=`/distribute/admin/indexpage`
                        }else{
                            that.$notify({
                            title: '提示',
                            message:data.result.errorMsg
                          }); 
                        }
                     }
                  });
              },
          },
     mounted() {
      this.dataId=window.location.href.split('=')[1];
           this.getCompanyList();
           this.getNode();
           this.request()
          },
      })
  </script>
@endsection